<template>
	<div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect, defineEmits } from "vue";
import { pxToRem } from "@/utils/index";
import { start } from "repl";
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { color, number } from "echarts";
import { he } from "element-plus/es/locale";
import Bar from "../projectMonitoringAnalysis/bar.vue";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
		type: Object,
		default: () => { },
	},
	qhzq:{
		type:number,
		default: 0,
	}
});
// 数据定义
const chartsData = reactive<any>({
	legendData: [],
	xAxisData: [],
	yAxisData: [],
	seriesData: [],
});
const qhzqValue = ref(0)
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogData'])
// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;
let legendSty = props.housingSupplyStatsData.legendStyle;
let gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
	if (echartDom.value && props.housingSupplyStatsData.legendStyle) {
		qhzqValue.value = props.qhzq
		myChart.value = echarts.init(echartDom.value);
		// 提示框文字样式
		const tooltipTextStyle = {
			color: "#fff",
			fontSize: pxToRem(14),
		};

		// 提示框背景
		const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";
		// 图例配置
		const legendStyle = {
			show: legendSty.show,
			icon: legendSty.icon,
			left: 'center',
			right: pxToRem(legendSty.right),
			top: typeof legendSty.top == "number" ? pxToRem(legendSty.top) : legendSty.top,
			bottom: pxToRem(legendSty.bottom),
			itemWidth: pxToRem(legendSty.itemWidth),
			itemHeight: pxToRem(legendSty.itemHeight),
			itemGap: pxToRem(legendSty.itemGap),
			textStyle: {
				color: "#fff",
				fontSize: pxToRem(14),
				rich: {},
				padding: [0, 0, pxToRem(-3), 0],
			},
			data: chartsData.legendData,
		};

		// 网格区域
		const gridConfig = {
			left: pxToRem(gridSty.left),
			right: pxToRem(gridSty.right),
			bottom: pxToRem(gridSty.bottom),
			top: pxToRem(gridSty.top),
			containLabel: true,
		};

		// x轴配置
		const xAxisConfig = {
			boundaryGap: true,
			offset: pxToRem(5),
			axisLine: {
				show: true,
				lineStyle: {
					color: 'rgba(40, 252, 255, 1)'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				textStyle: {
					color: "#FFFFFF",
					fontSize: pxToRem(12),
				},
			},
			data: chartsData.xAxisData,
		};
		// y轴配置
		const yAxisConfig = chartsData.yAxisData.map((item: any, index: any) => ({
			type: "value",
			name: item.name,
			nameTextStyle: {
				color: "#959699",
				fontSize: pxToRem(14),
				padding: [0, 0, 0, 0],
				align: index == 0 ? 'left' : 'right',
			},
			splitLine: {
				show: item.type == 2 ? false : true,
				lineStyle: {
					color: "#333",
					type: "dashed",
				},
			},
			axisLabel: {
				formatter: "{value}",
				fontSize: pxToRem(12),
			},
		}));
		// 数据项配置
		let seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
			name: chartsData.legendData[index],
			type: typeData[index].name,
			connectNulls: false,
			barWidth: '20%', 
			barGap:'50%',
			data:  data,
			symbol: "none",
			smooth: true,
			stack: 'total',
			yAxisIndex: typeData[index].type == 2 ? 1 : 0,
			areaStyle:
				typeData[index].areaStyleType == 2
					? {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: colors[index].a, // 0% 处的颜色
								},
								{
									offset: 1,
									color: colors[index].b, // 100% 处的颜色
								},
							],
						},
					}
					: null,
			itemStyle: {
				color: {
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					type: "linear",
					global: false,
					colorStops: [
						{
							offset: 0,
							color: colors[index].a,
						},
						{
							offset: 1,
							color: colors[index].b,
						},
					],
				},
			},
			markLine: {
				symbol: ['none', 'none'], //去掉箭头
				silent: true,
				lineStyle: {
					// color: 'rgba(87,69,140)',
					type: 'dashed',
					width: pxToRem(2),   //宽度
				},
				label: {
					color: 'white',
					fontSize: pxToRem(14),
					formatter: () => '预测'
				},
				data: [
					{
						xAxis:	 chartsData.xAxisData.length - qhzqValue.value
					}
				]
			},
		}));
		let zommIndex;
		chartsData.xAxisData.forEach((item: string,index: number) => {
				if(item == '2024-05'){
					console.log(index)
					zommIndex = index
				}
		})

		// 渲染图表数据
		const option = {
			tooltip: {
  trigger: 'axis',
  formatter: (val) => {
			console.log(val)
    let doms = ''
    val.forEach((x, i) => {
      doms += `${x.marker + x.seriesName}：${x.value}万㎡` + '<br>'
    })
    return (
      `${val[0].name}` + '<br>' + doms
    )
  }
},
			legend: legendStyle,
			grid: gridConfig,
			xAxis: xAxisConfig,
			yAxis: yAxisConfig,
			dataZoom: [{
				show: true,
				type: "slider",
				filterMode: 'none',
				left: pxToRem(50),
				right: pxToRem(20),
				bottom: pxToRem(15),
				height: pxToRem(20),
				startValue:zommIndex,
				endValue: chartsData.xAxisData.length - 1
			}],
			series: seriesConfig,
		};
		console.log(option)
		myChart.value.setOption(option);
		// 监听 dataZoom 的 end 事件来更新 markArea
		myChart.value.on('datazoom', function (event:any) {
				var start = event.start; // 获取缩放起始位置百分比
				var end = event.end;     // 获取缩放结束位置百分比

				// 更新 markArea 的起始和结束位置
				myChart.value.setOption({
						series: [{
								markArea: {
										data: [ [{xAxis: chartsData.xAxisData.length - 12}, {xAxis: chartsData.xAxisData.length - 1}]]
								}
						}]
				});
		});
		myChart.value.getZr().on("click", (params) => {
			emit('dialogData', option)
		});
	}
};
const updateChart = () => {
	if (myChart.value) {
		myChart.value.dispose(); // 销毁旧图表实例
	}
	chartsData.legendData = props.housingSupplyStatsData.legendData;
	chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
	chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
	chartsData.seriesData = props.housingSupplyStatsData.seriesData;
	colors = props.housingSupplyStatsData.colors;
	typeData = props.housingSupplyStatsData.typeData;
	legendSty = props.housingSupplyStatsData.legendStyle;
	gridSty = props.housingSupplyStatsData.gridConfig;
	getEchart();
};

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
